<template>
  <div id="analysis-panel">
    <!-- 排污口与污染源关联分析 -->
    <div class="analysis-section">
      <h3>排污口与污染源关联分析</h3>
      <el-form
        ref="pollutionSourceForm"
        :model="pollutionSourceQuery"
        :inline="true"
      >
        <el-form-item label="时间：">
          <el-date-picker
            v-model="pollutionSourceQuery.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="排口污染物：">
          <el-select
            v-model="pollutionSourceQuery.pollutant"
            placeholder="请选择"
          >
            <el-option label="水温" value="水温"></el-option>
            <el-option label="COD" value="COD"></el-option>
            <el-option label="氨氮" value="氨氮"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="queryPollutionSource"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="togglePollutionSourceView('table')"
            >列表</el-button
          >
          <el-button type="primary" @click="togglePollutionSourceView('chart')"
            >图表</el-button
          >
        </el-form-item>
      </el-form>
      <div v-if="pollutionSourceView === 'table'">
        <el-table :data="pollutionSourceTableData" border>
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column
            prop="pollutionSource"
            label="污染源"
          ></el-table-column>
          <el-table-column
            prop="concentration"
            label="浓度(mg/L)"
          ></el-table-column>
          <el-table-column prop="discharge" label="排放量(t)"></el-table-column>
        </el-table>
      </div>
      <div
        v-else
        ref="pollutionSourceChartContainer"
        style="width: 100%; height: 300px"
      ></div>
    </div>

    <!-- 排污口与上下游关联分析 -->
    <div class="analysis-section">
      <h3>排污口与上下游关联分析</h3>
      <el-form
        ref="upstreamDownstreamForm"
        :model="upstreamDownstreamQuery"
        :inline="true"
      >
        <el-form-item label="时间：">
          <el-date-picker
            v-model="upstreamDownstreamQuery.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="排口污染物：">
          <el-select
            v-model="upstreamDownstreamQuery.pollutant"
            placeholder="请选择"
          >
            <el-option label="水温" value="水温"></el-option>
            <el-option label="COD" value="COD"></el-option>
            <el-option label="氨氮" value="氨氮"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="queryUpstreamDownstream"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="toggleUpstreamDownstreamView('table')"
            >列表</el-button
          >
          <el-button
            type="primary"
            @click="toggleUpstreamDownstreamView('chart')"
            >图表</el-button
          >
        </el-form-item>
      </el-form>
      <div v-if="upstreamDownstreamView === 'table'">
        <el-table :data="upstreamDownstreamTableData" border>
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column
            prop="pollutionPort"
            label="排污口"
          ></el-table-column>
          <el-table-column
            prop="upstreamConcentration"
            label="上游浓度"
          ></el-table-column>
          <el-table-column
            prop="downstreamConcentration"
            label="下游浓度"
          ></el-table-column>
        </el-table>
      </div>
      <div
        v-else
        ref="upstreamDownstreamChartContainer"
        style="width: 100%; height: 300px"
      ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PollutionAnalysis",
  data() {
    return {
      // 排污口与污染源关联分析相关数据
      pollutionSourceQuery: {
        timeRange: ["2025-07-06", "2025-07-13"],
        pollutant: "水温",
      },
      pollutionSourceView: "chart", // 默认显示图表
      pollutionSourceTableData: [],
      pollutionSourceChart: null,

      // 排污口与上下游关联分析相关数据
      upstreamDownstreamQuery: {
        timeRange: ["2025-07-06", "2025-07-13"],
        pollutant: "水温",
      },
      upstreamDownstreamView: "chart", // 默认显示图表
      upstreamDownstreamTableData: [],
      upstreamDownstreamChart: null,
    };
  },
  mounted() {
    this.queryPollutionSource();
    this.queryUpstreamDownstream();
  },
  methods: {
    // 排污口与污染源关联分析查询
    queryPollutionSource() {
      // 模拟接口请求，实际需替换为真实接口调用
      this.pollutionSourceTableData = [
        {
          time: "2025-07-06 00:00",
          pollutionSource: "宿州某污水处理厂",
          concentration: 25.5,
          discharge: 120,
        },
        {
          time: "2025-07-07 00:00",
          pollutionSource: "宿州某污水处理厂",
          concentration: 26.2,
          discharge: 115,
        },
        {
          time: "2025-07-08 00:00",
          pollutionSource: "宿州某化工公司",
          concentration: 30.1,
          discharge: 90,
        },
      ];
      if (this.pollutionSourceView === "chart") {
        this.initPollutionSourceChart();
      }
    },

    // 初始化排污口与污染源关联分析图表
    initPollutionSourceChart() {
      if (this.pollutionSourceChart) {
        this.pollutionSourceChart.dispose();
      }
      this.$nextTick(() => {
        const chartDom = this.$refs.pollutionSourceChartContainer;
        if (chartDom) {
          this.pollutionSourceChart = echarts.init(chartDom);
          const option = {
            title: { text: "排污口与污染源关联分析" },
            tooltip: { trigger: "axis" },
            legend: { data: ["浓度(mg/L)", "排放量(t)"] },
            xAxis: {
              type: "category",
              data: this.pollutionSourceTableData.map((item) => item.time),
            },
            yAxis: [
              { type: "value", name: "浓度(mg/L)" },
              { type: "value", name: "排放量(t)", position: "right" },
            ],
            series: [
              {
                name: "浓度(mg/L)",
                type: "line",
                data: this.pollutionSourceTableData.map(
                  (item) => item.concentration
                ),
              },
              {
                name: "排放量(t)",
                type: "line",
                yAxisIndex: 1,
                data: this.pollutionSourceTableData.map(
                  (item) => item.discharge
                ),
              },
            ],
          };
          this.pollutionSourceChart.setOption(option);
        }
      });
    },

    // 切换排污口与污染源关联分析显示视图
    togglePollutionSourceView(viewType) {
      this.pollutionSourceView = viewType;
      if (viewType === "chart") {
        this.initPollutionSourceChart();
      }
    },

    // 排污口与上下游关联分析查询
    queryUpstreamDownstream() {
      // 模拟接口请求，实际需替换为真实接口调用
      this.upstreamDownstreamTableData = [
        {
          time: "2025-07-06 00:00",
          pollutionPort: "排污口A",
          upstreamConcentration: 22.3,
          downstreamConcentration: 24.1,
        },
        {
          time: "2025-07-07 00:00",
          pollutionPort: "排污口A",
          upstreamConcentration: 23.1,
          downstreamConcentration: 25.5,
        },
        {
          time: "2025-07-08 00:00",
          pollutionPort: "排污口A",
          upstreamConcentration: 24.5,
          downstreamConcentration: 26.8,
        },
      ];
      if (this.upstreamDownstreamView === "chart") {
        this.initUpstreamDownstreamChart();
      }
    },

    // 初始化排污口与上下游关联分析图表
    initUpstreamDownstreamChart() {
      if (this.upstreamDownstreamChart) {
        this.upstreamDownstreamChart.dispose();
      }
      this.$nextTick(() => {
        const chartDom = this.$refs.upstreamDownstreamChartContainer;
        if (chartDom) {
          this.upstreamDownstreamChart = echarts.init(chartDom);
          const option = {
            title: { text: "排污口与上下游关联分析" },
            tooltip: { trigger: "axis" },
            legend: { data: ["上游浓度", "下游浓度"] },
            xAxis: {
              type: "category",
              data: this.upstreamDownstreamTableData.map((item) => item.time),
            },
            yAxis: { type: "value", name: "浓度(℃)" },
            series: [
              {
                name: "上游浓度",
                type: "line",
                data: this.upstreamDownstreamTableData.map(
                  (item) => item.upstreamConcentration
                ),
              },
              {
                name: "下游浓度",
                type: "line",
                data: this.upstreamDownstreamTableData.map(
                  (item) => item.downstreamConcentration
                ),
              },
            ],
          };
          this.upstreamDownstreamChart.setOption(option);
        }
      });
    },

    // 切换排污口与上下游关联分析显示视图
    toggleUpstreamDownstreamView(viewType) {
      this.upstreamDownstreamView = viewType;
      if (viewType === "chart") {
        this.initUpstreamDownstreamChart();
      }
    },
  },
  beforeDestroy() {
    // 销毁 ECharts 实例，释放内存
    if (this.pollutionSourceChart) {
      this.pollutionSourceChart.dispose();
    }
    if (this.upstreamDownstreamChart) {
      this.upstreamDownstreamChart.dispose();
    }
  },
};
</script>

<style scoped>
#analysis-panel {
  padding: 20px;
}

.analysis-section {
  margin-bottom: 30px;
}

h3 {
  color: #1890ff;
  margin-bottom: 15px;
}

.el-form {
  margin-bottom: 15px;
}
</style>
